<!-- 示例核心代码(3/3) -->
<template>
    <div class="default-main ba-table-box">

        <el-dialog class="ba-operate-dialog" v-model="Table_data.table.extend!.showInfo" width="70%" style="height: 78%">
            <template #header>
                <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                    详情
                </div>
            </template>

            <Table2 ref="tableRef2"></Table2>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import {onMounted, inject, provide, ref, watch} from 'vue'
import type baTableClass2 from '/@/utils/baTable'
import baTableClass3 from '/@/utils/baTable'
import {baTableApi} from '/@/api/common'
import {useI18n} from 'vue-i18n'
import Table2 from '/@/components/table/index.vue'
import {defaultOptButtons} from '/@/components/table'
import baTableClass from "/@/utils/baTable";

const {t} = useI18n()
const Table_data = inject('baTable') as baTableClass2


const props = defineProps({
    selectedId: String // 接受一个初始 ID 来触发数据加载
});


watch(() => props.selectedId, (newId) => {
    if (newId) {
        baTable.table.filter!.search = [{field: 'member_id', val: newId, operator: '='}]
        baTable.getIndex()
    }
}, {immediate: true});

const tableRef2 = ref()
const optButtons2: OptButton[] = defaultOptButtons([])

const baTable = new baTableClass3(
    new baTableApi('/admin/member.Bill/'),
    {
        pk: 'id',
        column: [
            {type: 'selection', align: 'center', operator: false},
            {label: "ID", prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom'},
            {label: '标题', prop: 'title', align: 'center', sortable: false},

            {
                label: "用户昵称",
                prop: 'member.nickname',
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'),
                render: 'tags',
                operator: 'LIKE'
            },
            {label: "积分", prop: 'income', align: 'center', operator: 'RANGE', sortable: false},
            {
                label: "类型",
                prop: 'type',
                align: 'center',
                render: 'tag',
                operator: 'eq',
                sortable: false,
                custom: {"1": 'success', "2": 'danger'},
                replaceValue: {"1": "收入", "2": "支出"}
            },
            {
                label: "用户之前积分",
                prop: 'before_income',
                align: 'center',
                operator: 'RANGE',
                sortable: false
            },
            {
                label: "用户之后积分",
                prop: 'after_income',
                align: 'center',
                operator: 'RANGE',
                sortable: false
            },
            {
                label: "创建时间",
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                operator: 'RANGE',
                sortable: 'custom',
                width: 160,
                timeFormat: 'yyyy-mm-dd hh:MM:ss'
            },
        ],
        dblClickNotEditColumn: [undefined, 'status'],
    },
    {
        defaultItems: {status: '1'},
    }
)

provide('baTable', baTable)

</script>

<style scoped lang="scss">
.info-box {
    margin-top: 60px;

    div {
        width: 100%;
        text-align: center;
    }

    .mt-40 {
        margin-top: 40px;
    }
}
</style>
